<template>
  <div class="app-container">
    <div class="app-content">

      <el-descriptions>
        <el-descriptions-item label="设备名称">{{ form.equipmentName }}</el-descriptions-item>
        <el-descriptions-item label="所属项目">{{ form.projectId }}</el-descriptions-item>
        <el-descriptions-item label="所属片区">{{ form.areaId }}</el-descriptions-item>
        <el-descriptions-item label="定位" span="3">{{ form.position }}</el-descriptions-item>
        <el-descriptions-item label="业主单位">{{ form.ownerUnit }}</el-descriptions-item>
        <el-descriptions-item label="单位地址" span="3">{{ form.unitArea }}</el-descriptions-item>
        <el-descriptions-item label="业主负责人">{{ form.owner }}</el-descriptions-item>
        <el-descriptions-item label="业主负责人电话">{{ form.ownerPhone }}</el-descriptions-item>
        <el-descriptions-item label="项目经理">{{ form.projectManager }}</el-descriptions-item>
        <el-descriptions-item label="项目经理电话">{{ form.projectManagerPhone }}</el-descriptions-item>
        <el-descriptions-item label="维修员">{{ form.repairPerson }}</el-descriptions-item>
        <el-descriptions-item label="维修员电话">{{ form.repairPersonPhone }}</el-descriptions-item>
        <el-descriptions-item label="备注" span="3">{{ form.remark }}</el-descriptions-item>
        <el-descriptions-item label="图片" span="3">
          <template>
            <img :src="item" alt="" class="son-img" v-for="(item, index) in form.imgList" :key="index" />
          </template>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
  import { getEquipment } from "@/api/resource/equipment";
  export default {
    name: '',
    data() {
      return {
        baseUrl: process.env.VUE_APP_BASE_API,
        form: {}
      }
    },
    created() {
      let id = this.$route.params.id
      if (!id) return
      getEquipment(id).then(response => {
        if (response.data.img) {
          response.data.imgList = []
          let imgArr = response.data.img.split(',')
          response.data.imgList = imgArr.map(item => {
            return this.baseUrl + item
          })
        }
        this.form = response.data;
      });
    }
  }
</script>

<style lang="scss" scoped>
.app-content {
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 30px;
    overflow-y: scroll;
    .son-img {
      width: 102px;
      height: 102px;
      margin-right: 20px;
    }
    .files {
      // display: flex;
      // flex-wrap: wrap;
      .file-content {
        width: 422px;
        height: 72px;
        background: #F8F8F8;
        display: flex;
        align-items: center;
        padding: 0 30px;
        margin: 0 20px 20px 0;
        cursor: pointer;
        img {
          width: 34px;
          height: 39px;
        }
        .file-name {
          margin: 0 20px;
          p {
            margin: 0;
          }
          span {
            font-size: 14px;
            color: #999999;
            line-height: 19px;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
    .son-content {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 30px;
      
    }
  }
</style>